<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>盒子模型-案例练习(box model case exercise)</title>
  <link rel="stylesheet" href="./css/reset.css">
  <link rel="stylesheet" href="./css/common.css">
  <!-- 案例2: 小米面板 -->
  <link rel="stylesheet" href="./css/page-xiaomi.css">
  <!-- 案例3: 网页面板 -->
  <link rel="stylesheet" href="./css/page-item.css">
  <style>
    /* a样式案例1: 按钮练习 */
    .btn {
      display: inline-block;
      width: 70px;
      height: 25px;
      /* 水平垂直居中 */
      line-height: 25px;
      text-align: center;

      color: #fff;
      border-radius: 14px;
      overflow: hidden;
    }
    
    /* 下面层级使用btn元素的并集选择器,这里hover无效,被覆盖了 */
    /* .btn:hover {
      background-color: #888;
      color: #fff;
    } */

    .btn.new {
      background-color: #e1251b;
    }
    
    .btn.vip {
      background-color: #363634;
    }

    .btn:hover {
      background-color: #c81623;
    }
  </style>
</head>
<body>

  <!-- 案例1: 按钮练习 -->
  <a href="https://xinren.jd.com/?channel=99#/home" class="btn new">新人福利</a>
  <a href="https://passport.jd.com/new/login.aspx" class="btn vip">PLUS会员</a>

  <!-- 案例2: 小米面板 -->
  <a href="https://www.mi.com/xiaomipad5pro" target="_blank" class="xiaomi-item">
    <img src="../../images/xiaomi01.webp" alt="xiaomi">
    <h3 class="title">小米平板5 ProMax</h3>
    <p class="desc text_white_ellipsis">
      全新12代英特尔处理器，CNC一体精雕工艺，2.5K 120Hz高清屏，可选MX550独立显卡
    </p>
    <div class="price">
      <span class="new-price">2488元</span>
      <span class="old-price">2599元</span>
    </div>
  </a>

  <!-- 案例3: 网页面板 -->
  <div class="item">
    <div class="album">
      <a href="#">
        <img src="https://i0.hdslb.com/bfs/archive/9c763bf06b7765462eac62cc0a9a34b260d3f9c8.jpg@672w_378h_1c.webp" referrerpolicy="no-referrer" alt="">
      </a>
      <div class="info">
        <a href="#">
          <p class="text_white_ellipsis">萌化了！谁会不喜欢毛茸茸的小懒懒呢？萌化了！谁会不喜欢毛茸茸的小懒懒呢？萌化了！谁会不喜欢毛茸茸的小懒懒呢？萌化了！谁会不喜欢毛茸茸的小懒懒呢？</p>
        </a>
        <a href="#" class="anchor">
          <span class="nickname">Muxi慕喜咩</span>
          <span class="time">3-20</span>
        </a>
      </div>
    </div>
  </div>
  
</body>
</html>